<template>
  <h2 style="text-align: center;">承运合同列表</h2><br>
  合同标题：<el-input v-model="form.contracTitle" style="width: 250px;height: 40px;"
    placeholder="请输入合同标题" clearable />
  外协单位：<el-input v-model="form.carrierUnit" style="width: 250px;height: 40px;"
    placeholder="请输入外协单位" clearable />
  外协负责人：<el-input v-model="form.carrierName" style="width: 250px;height: 40px;"
    placeholder="请输入外协负责人" clearable /> <br> <br>&nbsp;&nbsp;
  经办人：<el-input v-model="form.handlingName" style="width: 250px;height: 40px;"
    placeholder="请输入经办人" clearable />
  签订时间：<el-date-picker v-model="form.signedTime" style="width: 250px;height: 40px;" 
    placeholder="请输入签订时间" type="date" value-format="YYYY-MM-DD" clearable />
      &nbsp;&nbsp;&nbsp;&nbsp;
  审批状态：<el-select v-model="form.contractStatus" style="width: 250px;height: 40px;">
            <el-option label="全部" value=" " />
            <el-option v-for="item in Status" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>&nbsp;
  <el-button type="primary" @click="GetAll">查询</el-button>
  <el-button @click="Reset">重置</el-button>
  <br><br>
  <el-button type="primary" @click="router.push('/CarrierAdd')">新增</el-button>
  <el-button type="primary" @click="PDel()">批量删除</el-button>
  <br><br>
  <el-scrollbar>
  <div align="center">
    <el-table :data="tableData" border style="width: 1800px" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
    <el-table-column prop="contractNumber" label="合同编号" align="center" width="155"/>
    <el-table-column prop="contracTitle" label="合同标题" align="center" width="150"/>
    <el-table-column prop="carrierUnit" label="外协单位" align="center" width="150"/>
    <el-table-column prop="carrierName" label="外协负责人" align="center" width="150"/>
    <el-table-column label="线路" align="center" width="150">
      <template v-slot="scope">
        <span>{{ scope.row.line }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="freight" label="吨运价" align="center" width="150"/>
    <el-table-column prop="tonnage" label="包车条件吨位" align="center" width="150"/>
    <el-table-column prop="charterAmount" label="包车金额" align="center" width="150"/>
    <el-table-column prop="signedTime" label="签订日期" align="center" width="150">
      <template v-slot="scope">
        <span>{{ (scope.row.signedTime).substring(0,10) }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="handlingName" label="经办人" align="center" width="150"/>
    <el-table-column prop="createDate" label="创建时间" align="center" width="150">
      <template v-slot="scope">
        <span>
          {{ (scope.row.createDate).substring(0,10) +' '+ (scope.row.createDate).substring(11,16) }}
        </span>
      </template>
    </el-table-column>
    <el-table-column label="状态" align="center" width="150">
      <template v-slot="scope">
        <span v-if="scope.row.contractStatus==0">待提交</span>
        <span v-if="scope.row.contractStatus==1">待审批</span>
        <span v-if="scope.row.contractStatus==2">已通过</span>
        <span v-if="scope.row.contractStatus==3">已拒绝</span>
      </template>
    </el-table-column>
    <el-table-column prop="updateName" label="审批人" align="center" width="150"/>
    <el-table-column label="操作" fixed="right"  min-width="185" align="center">
      <template v-slot="scope">
        <el-button type="primary" text style="width: 15px;" v-if="scope.row.contractStatus!=2"
        @click="Update(scope.row.contractId)">修改</el-button>
        <el-button type="primary" text style="width: 15px;" @click="Del(scope.row.contractId)">删除</el-button>
        <el-button type="primary" text style="width: 15px;" @click="Check(scope.row.contractId)">查看</el-button>
        <el-button type="primary" text style="width: 48px;"
          v-if="scope.row.contractStatus==0" @click="Approval(scope.row.contractId,1)">
         提交审批</el-button>
        <el-button type="primary" text style="width: 48px;"
          v-if="scope.row.contractStatus==3">
         重新提交</el-button>
      </template>
    </el-table-column>
  </el-table>
  </div><br>
  <el-pagination
      v-model:current-page="form.pageIndex"
      v-model:page-size="form.pageSize"
      :page-sizes="[4, 8, 15]"
      prev-text="上一页"
      next-text="下一页"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="form.pageRoot"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-scrollbar>
  <el-dialog v-model="dialogTableVisible" title="查看合同信息" width="1100">
    <el-table :data="gridData">
      <el-table-column prop="contractNumber" label="合同编号" align="center" />
      <el-table-column prop="contracTitle" label="合同标题" align="center" />
      <el-table-column prop="carrierUnit" label="外协单位" align="center" />
      <el-table-column prop="carrierName" label="外协负责人" align="center"/>
      <el-table-column prop="line" label="线路" align="center" >
        <template v-slot="scope">
          <span>车线名称{{ scope.row.line }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="freight" label="吨运价" align="center"/>
      <el-table-column prop="tonnage" label="包车条件吨位" align="center"/>
      <el-table-column prop="charterAmount" label="包车金额" align="center"/>
      <el-table-column prop="signedTime" label="签订日期" align="center" >
        <template v-slot="scope">
          <span>{{ (scope.row.signedTime).substring(0,10) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="handlingName" label="经办人" align="center" />
      <el-table-column prop="createDate" label="创建时间" align="center" >
        <template v-slot="scope">
          <span>
            {{ (scope.row.createDate).substring(0,10) +' '+ (scope.row.createDate).substring(11,16) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" >
        <template v-slot="scope">
          <span v-if="scope.row.contractStatus==0">待提交</span>
          <span v-if="scope.row.contractStatus==1">待审批</span>
          <span v-if="scope.row.contractStatus==2">已通过</span>
          <span v-if="scope.row.contractStatus==3">已拒绝</span>
        </template>
      </el-table-column>
      <el-table-column prop="createName" label="审批人" align="center"/>
    </el-table>
  </el-dialog>
</template>

<script setup lang="ts">
import router from '@/router';
import axios from 'axios';
import { onMounted, reactive, ref } from 'vue';
const form=reactive({
  pageIndex:1,
  pageSize:4,
  classify:3,
  pageRoot:0,
  pageCount:0,
  contracTitle:'',
  carrierName:'',
  carrierUnit:'',
  handlingName:'',
  signedTime:'',
  contractStatus:''
})
onMounted(()=>{
  GetAll()
  //枚举下拉框
  ContractStatus()
})
const tableData = ref([])
//承运合同列表
const GetAll=()=>{
  axios.get('ContractRead/api/ReadContract/GetAll', {
    params: {
      pageIndex:form.pageIndex,
      pageSize:form.pageSize,
      classify:form.classify,
      contracTitle:form.contracTitle,
      carrierUnit:form.carrierUnit,
      carrierName:form.carrierName,
      handlingName:form.handlingName,
      signedTime:form.signedTime,
      contractStatus:form.contractStatus
    }
  }).then((ret) => {
    console.log(ret.data)
    tableData.value=ret.data.data.plist
    form.pageRoot=ret.data.data.pageRoot
    form.pageCount=ret.data.data.pageCount
  })
}
//分页
const handleSizeChange = (val: number) => {
  form.pageSize=val
  GetAll()
}
const handleCurrentChange = (val: number) => {
  form.pageIndex=val
  GetAll()
}
//枚举下拉框
const Status:any=ref([])
const ContractStatus=()=>{
  axios.get('ContractRead/api/ReadContract/ContractStatus', 
  ).then((ret) => {
    console.log(ret.data)
    Status.value=ret.data
  })
}
const Checked=ref([]);
const handleSelectionChange = (val: any) => {
  Checked.value = val
  console.log(Checked.value);
}
//批量删除
const PDel=()=>{
  let dd=Checked.value.map((x:any)=>x.contractId)
  console.log(dd);
  axios.post(`Contract/api/Contract/BatchDelContracted`,{contractId:dd}).then((ret) => {
    console.log(ret.data)
    if(ret.data.data==1){
        ElMessage.success('批删成功')
        GetAll()
      }else{
        ElMessage.error('批删失败')
      }
  })
}
import { ElMessage, ElMessageBox } from 'element-plus';
//单删除
const Del=(contractId:any)=>{
  ElMessageBox.confirm(
    '确定删除吗？?',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.get('Contract/api/Contract/DeleteContracted?ContractId='+ contractId
      ).then((ret) => {
        console.log(ret.data)
        if(ret.data.data==1){
          ElMessage.success('删除成功')
          GetAll()
        }else{
          ElMessage.error('删除失败')
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'error',
        message: '取消',
      })
    })
}
//修改
const Update=(contractId:number)=>{
  router.push({
    path:'/CarrierUpda',
    query:{
      contractId:contractId
    }
  })
}
const dialogTableVisible=ref(false)
const gridData:any=ref([])
//查看
const Check=(contractId:any)=>{
  dialogTableVisible.value=true
  axios.get('ContractRead/api/ReadContract/GetContracted', {
    params: {
      contractId:contractId
    }
  }).then((ret) => {
    console.log(ret.data.data)
    gridData.value=[ret.data.data]
    console.log(gridData.value);
    
  })
}
//提交审批
const Approval=(contractId:any,contractStatus:any)=>{
  axios.get('Contract/api/Contract/UpdateState', {
    params: {
      contractId:contractId,
      contractStatus:contractStatus
    }
  }).then((ret) => {
    console.log(ret.data)
    if(ret.data.data==1){
      ElMessage.success('修改成功')
      GetAll()
    }else{
      ElMessage.error('修改失败')
    }  
  })
}
//重置
const Reset=()=>{
  form.contracTitle='',
  form.carrierUnit='',
  form.carrierName='',
  form.handlingName='',
  form.signedTime='',
  form.contractStatus=''
  GetAll()
}
</script>

<style scoped>

</style>